

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>登录界面</title>
	<link href="../css/default.css" rel="stylesheet" type="text/css" />
	<!--必要样式-->
	<link href="../css/styles.css" rel="stylesheet" type="text/css" />
	<link href="../css/demo.css" rel="stylesheet" type="text/css" />
	<link href="../css/loaders.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='login'>
	<div class='login_title'>
		<span>氨基酸数据库</span>
	</div>
	<div class='login_fields'>
		<div class='login_fields__user'>
			<div class='icon'>
				<img alt="" src='../img/user_icon_copy.png'>
			</div>
			<input id="login-username" name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
			<div class='validation'>
				<img alt="" src='../img/tick.png'>
			</div>
		</div>
		<div class='login_fields__password'>
			<div class='icon'>
				<img alt="" src='../img/lock_icon_copy.png'>
			</div>
			<input id="login-password" name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
			<div class='validation'>
				<img alt="" src='../img/tick.png'>
			</div>
		</div>
		<div class='login_fields__password'>
			<div class='icon'>
				<img alt="" src='../img/key.png'>
			</div>
			<input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
			<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
				<canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
			</div>
		</div>
		<div class='login_fields__submit'>
			<input type='button' id="login" value='登录'>
			<input type='button' id="register" value='注册'>
		</div>
	</div>
	<div class='success'>
	</div>
	<div class='disclaimer'>
		<p>齐鲁制药质量保证部</p>
	</div>
</div>
<div class='authent'>
	<div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
		<div class="loader-inner ball-clip-rotate-multiple">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<p>认证中...</p>
</div>
<div class="OverWindows"></div>
<link href="../layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src='../js/stopExecutionOnTimeout.js?t=1'></script>
<script src="../layui/layui.js" type="text/javascript"></script>
<script src="../js/Particleground.js" type="text/javascript"></script>
<script src="../js/Treatment.js" type="text/javascript"></script>
<script src="../js/jquery.mockjax.js" type="text/javascript"></script>
<script src="../js/login.js" type="module"></script>
<script type="text/javascript">
	var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
	var ajaxmockjax = 0;//是否启用虚拟Ajax的请求响 0 不启用  1 启用

	var CodeVal = 0;
	Code();
	function Code() {
		if(canGetCookie === 1){
			createCode("AdminCode");
			var AdminCode = getCookieValue("AdminCode");
			showCheck(AdminCode);
		}else{
			showCheck(createCode(""));
		}
	}
	function showCheck(a) {
		CodeVal = a;
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.clearRect(0, 0, 1000, 1000);
		ctx.font = "80px 'Hiragino Sans GB'";
		ctx.fillStyle = "#E8DFE8";
		ctx.fillText(a, 0, 100);
	}
	// 绑定回车键事件到登录按钮
	$(document).keypress(function (e) {
		if (e.which == 13) {
			$('#login').click(); // 触发登录按钮点击事件
		}
	});
	//粒子背景特效
	$('body').particleground({
		dotColor: '#E8DFE8',
		lineColor: '#133b88'
	});
	$('input[name="pwd"]').focus(function () {
		$(this).attr('type', 'password');
	});
	$('input[type="text"]').focus(function () {
		$(this).prev().animate({ 'opacity': '1' }, 200);
	});
	$('input[type="text"],input[type="password"]').blur(function () {
		$(this).prev().animate({ 'opacity': '.5' }, 200);
	});
</script>
</body>
</html>
